<template>
  <div>
    <!-- 9.使用vant实现首页下拉刷新 -->
    <van-pull-refresh v-model="loading" @refresh="onRefresh">
      <!-- 4.实现首页布局 -->
      <van-nav-bar>
        <template #left>
          <h3>保障服务</h3>
        </template>
      </van-nav-bar>

      <van-card
        num="2"
        price="2.00"
        desc="描述信息"
        title="商品标题"
        thumb="https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg"
      />
      <div class="box1">
        <router-link
          v-for="(value, index) in 6"
          :key="index"
          :to="'/detail/' + index"
        >
          <van-grid :column-num="3" :border="false">
            <van-grid-item icon="photo-o" :text="index" />
          </van-grid>
        </router-link>
      </div>
    </van-pull-refresh>

    <TabBar :index="0" />
  </div>
</template>
<script setup>
import {ref} from 'vue'
import TabBar from "@/components/TabBar.vue";
import { showToast } from "vant";

const count = ref(0);
const loading = ref(false);
const onRefresh = () => {
  setTimeout(() => {
    showToast("刷新成功");
    loading.value = false;
    count.value++;
  }, 1000);
};
</script>
<style lang="scss" scoped>
.box1 {
  // display: flex;
  a {
    display: inline-block;
    width: 33%;
    // flex: 1;
    // margin-left: 10px;
    .van-grid {
      margin-left: 45px;
    }
  }
}
</style>